<template>
    <div class="container">
        <system-nav name="编辑账户" :showBack="true"></system-nav>
        <div class="inner">
            <div class="system-form">
                <Form ref="form" :model="form" :rules="ruleValidate" :label-width="120" :hide-required-mark="true">
                    <FormItem label="用户名">
                        <Input v-model="form.username" :disabled="true" type="text" class="common-input" clearable placeholder="请输入用户名" />
                    </FormItem>
                    <FormItem label="性别">
                        <RadioGroup v-model="form.sex">
                            <Radio :label="1" :disabled="true">男</Radio> 
                            <Radio :label="2" :disabled="true">女</Radio>
                        </RadioGroup>
                    </FormItem>
                    <FormItem label="身份证号">
                        <Input v-model="form.idCard" :disabled="true" type="text" class="common-input" clearable placeholder="请输入身份证号" />
                    </FormItem>
                    <FormItem label="手机号">
                        <Input v-model="form.phone" :disabled="true" type="text" class="common-input" clearable placeholder="请输入手机号" />
                    </FormItem>
                    <FormItem label="民族">
                        <Input v-model="form.national" :disabled="true" type="text" class="common-input" clearable placeholder="请输入民族" />
                    </FormItem>
                    <FormItem label="政治面貌">
                        <Input v-model="form.political" :disabled="true" type="text" class="common-input" clearable placeholder="请输入政治面貌" />
                    </FormItem>
                    <FormItem label="文化程度">
                        <Input v-model="form.cultural" :disabled="true" type="text" class="common-input" clearable placeholder="请输入文化程度" />
                    </FormItem>
                    <FormItem label="职业">
                        <Input v-model="form.job" :disabled="true" type="text" class="common-input" clearable placeholder="请输入职业" />
                    </FormItem>
                    <FormItem label="新密码" prop="newPwd">
                        <Input type="password" v-model="form.newPwd" autocomplete="new-password" class="common-input" placeholder="请输入新密码"></Input>
                    </FormItem>
                    <FormItem label="确认密码" prop="confirmPwd">
                        <Input type="password" v-model="form.confirmPwd" class="common-input" placeholder="请确认新密码"></Input>
                    </FormItem>         
                    <FormItem>
                        <Button type="primary" class="margin-right-25" @click="handleSubmit('form')">提交</Button>
                        <Button type="primary" @click="goBack" ghost>返回</Button>
                    </FormItem>
                </Form>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import SystemNav from '@/components/SystemNav'
import mixin from '@/mixins'
import { editAccountRest, viewAccountRest } from '@/common/apis/system'

export default {
    name: 'accountEdit',
    mixins: [mixin],
    components: {
        SystemNav
    },
    data() {
        const validatePass = (rule, value, callback) => {
            if(value) {
                if (this.form.newPwd !== '') {
                    this.$refs.form.validateField('confirmPwd')
                } 
                callback()
            }
        }
        const validatePassCheck = (rule, value, callback) => {
            if (value && value !== this.form.newPwd) {
                callback(new Error('确认密码与新密码不一致'))
            } else {
                callback()
            }
        }
        return {
            form: {
                username: '',
                sex: 1,
                idCard: '',
                phone: '',
                national: '',
                political: '',
                cultural: '',
                job: '',
                newPwd: '',
                confirmPwd: ''
            },
            ruleValidate: {
                newPwd: [
                    { required: true, message: '新密码不能为空', trigger: 'blur' },
                    { validator: validatePass, trigger: 'blur' }
                ],
                confirmPwd: [
                    { required: true, message: '确认密码不能为空', trigger: 'blur' },
                    { validator: validatePassCheck, trigger: 'blur' }
                ]
            }
        }
    },
    computed: {
        ...mapGetters(['userInfo'])
    },
    mounted() {
        this.id = Number(this.$route.params.id)
        this.initData()
    },
    methods: {
        initData() {
            viewAccountRest(this.id).then(result => {
                const { username, sex, idCard, phone, national, political, cultural, job } = result.data.content
                this.form = { username, sex: sex || 1, idCard, phone, national, political, cultural, job }
            })
        },
        handleSubmit(name) {
            this.$refs[name].validate(valid => {
                if (valid) {
                    const { username, newPwd } = this.form
                    let params = {
                        userId: this.id,
                        userName: username,
                        newPwd
                    }
                    editAccountRest(params).then(result => {
                        if (result.data.code === 200) {
                            this.$Message.success({
                                background: true,
                                content: '编辑成功'
                            })
                            if (this.id === this.userInfo.userId) {
                                this.$router.push('/login')
                            } else {
                                this.goBack()
                            }
                        } else {
                            this.reset()
                            this.$Message.error({
                                background: true,
                                content: '编辑失败'
                            })
                        }
                    })
                }
            })
        },
        reset() {
            this.$refs.form.resetFields()
        }
    }
}
</script>
